<template>
    <div class="login-container">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
            <!-- 账号：label-显示的文字，v-model-绑定的属性值 -->
            <h2 class="login-title">xxxx系统</h2>
            <el-form-item label="账号" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
   
<script>
export default {
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
            //校验规则
            rules: {
                username: [
                    { required: true, message: "请输入用户名称", trigger: "blur" },
                    { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 6, max: 15, message: "长度在 6 到 15个字符", trigger: "blur" },
                ],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                //console.log(valid);//校验成功则valid为true。反之
                if (valid) {
                    //提交表单给后台验证是否正确
                    alert("submit!");
                } else {
                    console.log("验证失败");
                    return false;
                }
            });
        },
    },
};
</script>
<style scoped>
.login-form {
    width: 350px;
    /*上下边距160px,左右自动居中*/
    margin: 150px auto;
    background-color: rgb(255, 255, 255, 0.8);
    padding: 28px;
    border-radius: 20px;
}

.login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../assets/login.png);
}


.login-title {
    text-align: center;
}

.center-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

  